<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线客服</title>
<link rel="short icon" href="images/chat/copylogo.png"/>
<link rel="stylesheet" href="css/chat.css"/>
</head>
<body>
<div class="main" id="app">
    <div class="top">
        <div class="top-left">
            <img src="images/chat/figure.png" class="header">
			<div class="search">
				<div class="username">{{user.nickName}}</div>
			</div>
        </div>
    </div>
    <div class="box">
        <div class="chat-list">
            <div class="list-box select" v-for="item in users">
				<div class="heading">
					<img class="chat-head" src=images/chat/figure.png alt="" @click="checkUser(item.id)">
					<div class="unread-num" >0</div>
				</div>      	
                <div class="chat-rig">
            		<div class="chat-name">
            			<span class="title">{{item.name}}</span>
            			<span class="relation">{{item.id}}</span>
            		</div>
            		<div class="chat-time">2022-08-04</div>
            		<div class="clear"></div>
                    <p class="text">无情不是多情苦</p>
            	</div>
            </div>
        </div>
        <div class="box-right">
            <div id="">
            	<div class="recvfrom">
            	    <div class="nav-top">
            	        <p>公众号</p>
            	    </div>
            	    <div class="news-top">
            	       <!--  --> <ul id="chat_list">
            	          <!--  <li class="other">
            					<div class="time">20:18</div>
            	                <div class="avatar">
            						<img src=images/chat/figure.png alt="">
            					</div>
            	                <div class="msg">
            	                    <p class="msg-name">宋温暖</p>
            	                    <p class="msg-text">请接下这个活</p>
            	                </div>
            	            </li>
            	            <li class="self">
            					<div class="time">20:18</div>
            					<div class="avatar">
            						<img src=images/chat/figure.png alt="">
            						
            					</div>
            					<div class="msg">
            					    <p class="msg-name">安安安</p>
            					    <p class="msg-text">请接下这个下这个活请接下接下这个活请接下接下这个活请接下下这个活请接下这个活</p>
            					</div>
            	            </li>-->
            	        </ul>
            	    </div>
            	</div>
            	<div class="sendto">
            	    <div class="but-nav">
            	        <ul>
            	            <li class="font"></li>
            	            <li class="face"></li>
            	            <li class="cut"></li>
            	            <li class="page"></li>
            	            <li class="old"></li>
            	        </ul>
            	    </div>
            	    <div class="but-text">
            	        <textarea name="" id="" cols="110" rows="6" v-model="content"></textarea>
            	        <a href="#" class="button" @click="send">发送</a>
            	    </div>
            	</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/websocket.js"></script>
<script type="text/javascript" src="js/show-dialog.js"></script>
<script type="text/javascript">
let webSocket;
let app = new Vue({
	el: "#app",
	data: {
		user: {},
		content: "",
		users: [],
		usid: ""
	},
	mounted: function() {
		axios.get("/user/member/checklogin").then(rt => {
			if(rt.status == 200 && rt.data.code == 200) {
				this.user = rt.data.data;
				this.usid= this.user.mid;
				
				webSocket = openWebSocket(this.usid, this.user.nickName);
				
				webSocket.onmessage = function(msg) {
					let result = JSON.parse(msg.data);
					if(result.code == "101") {	// 说明是登录信息
						app.$data.users = [];
						let temp = result.data.split(";");
						for(let i = 0, len = temp.length - 1; i < len; ++ i) {
							let arr = temp[i].split("-");
							app.$data.users.push({"id": arr[0], "name": arr[1]});
						}
						return;
					}
					
					if(result.code == "102") {	// 说明是下线
						return;
					}
					
					if(result.code == "103") {	// 说明是聊天数据
 						if(result.id == app.$data.user.mno) {
							return;
						}
						let str = app.getInfo(result.name, result.data);
						$("#chat_list").append($(str));
						return;
					}
				}
				return;
			}
			showmsg("请先登录...", "red", function() {location.href="/login.html"});
		})
	},
	methods: {
		getInfo: function(name, msg) {
			let str = '<li class="other"><div class="time">' + this.getCurrentDate() + '</div><div class="avatar">';
			str +='<img src=images/chat/figure.png alt=""></div><div class="msg"><p class="msg-name">' + name + '</p>';
			str += '<p class="msg-text">' + msg + '<emoji class="pizza"></emoji></p></div></li>';
			return str;
		},
		getCurrentDate: function() {
			let now = new Date();
			let year = now.getFullYear();
			let month = now.getMonth();
			let date = now.getDate();
			let hour = now.getHours();
			let minu = now.getMinutes();
			let sec = now.getSeconds();
			month = month + 1;
			month = month < 10 ? '0' + month : month;
			date = date < 10 ? '0' + date : date;
			hour = hour < 10 ? '0' + hour : hour;
			minu = minu < 10 ? '0' + minu : minu;
			sec = sec < 10 ? '0' + sec : sec;
			return year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
		},
		checkUser: function(id) {
			this.usid = id;
		},
		send: function() {
			if(this.content == "" || !this.content) {
				return;
			}
			
			let info = this.usid;
			if(this.usid == this.user.mid) {	// 说明点击是自己,则群发
				info ="all";
			}
			info += "#" + this.content;
			webSocket.send("data:" + info);
			let str = '<li class="self"><div class="time">' + this.getCurrentDate() + '</div><div class="avatar">';
			str += '<img src=images/chat/figure.png alt=""></div><div class="msg"><p class="msg-name">' + this.user.nickName + '</p>';
			str += '<p class="msg-text">' + this.content + '<emoji class="pizza"></emoji></p></div></li>';
			$("#chat_list").append($(str));
			this.content = ""; 
		}
	}
})
</script>
</html>